<template>
  <a-card title="流程图" :body-style="{ padding: '10px' }">
    <template #extra>
      <a-button size="small" type="primary" @click="generatorImage">生成图片</a-button>
    </template>
    <div ref="lfConitanerRef" style="height: 70vh"></div>
  </a-card>
</template>

<script lang="ts" setup>
// 参考地址： http://logic-flow.org/guide/start.html#logicflow%E6%98%AF%E4%BB%80%E4%B9%88 
  import { computed, nextTick, onMounted, ref, watch } from 'vue'
  import LogicFlow from '@logicflow/core'
  import { Control, Menu, DndPanel, Snapshot, NodeResize } from '@logicflow/extension'
  import '@logicflow/core/dist/style/index.css'
  import '@logicflow/extension/lib/style/index.css'
  const lfConitanerRef = ref<HTMLElement | null>(null)
  LogicFlow.use(Control)
  LogicFlow.use(Menu)
  LogicFlow.use(DndPanel)
  LogicFlow.use(Snapshot)
  LogicFlow.use(NodeResize)
  const lf = ref<LogicFlow>()
  const data = {
    // 节点
    nodes: [
      {
        id: 1,
        type: 'rect',
        x: 300,
        y: 30,
        text: '开始',
      },
      {
        id: 2,
        type: 'diamond',
        x: 300,
        y: 150,
        text: '判断',
      },
      {
        id: 3,
        type: 'circle',
        x: 300,
        y: 300,
        text: '结束',
      },
      {
        id: 4,
        type: 'diamond',
        x: 600,
        y: 350,
        text: '判断',
      },
    ],
    // 边
    edges: [
      {
        type: 'polyline',
        sourceNodeId: 1,
        targetNodeId: 2,
      },
      {
        type: 'polyline',
        sourceNodeId: 2,
        targetNodeId: 3,
      },
    ],
  }

  const options = computed(() => {
    return {
      container: lfConitanerRef.value as HTMLElement,
      stopScrollGraph: true,
      stopZoomGraph: true,
      grid: {
        type: 'dot',
        size: 20,
      },
      style: {
        circle: {
          // 圆形样式
          r: 40,
          fill: '#fff',
          strokeWidth: 2,
        },
      },
    }
  })
  onMounted(() => {
    lf.value = new LogicFlow(options.value)
    lf.value.setPatternItems([
      {
        label: '选区',
        icon: '',
        callback: () => {
          lf.value?.openSelectionSelect()
          lf.value?.once('selection:selected', () => {
            lf.value?.closeSelectionSelect()
          })
        },
      },
      {
        type: 'circle',
        text: '开始',
        label: '开始节点',
        icon: '',
      },
      {
        type: 'rect',
        label: '用户任务',
        icon: '',
        className: 'important-node',
      },
      {
        type: 'rect',
        label: '系统任务',
        icon: '',
        cls: 'import_icon',
      },
      {
        type: 'diamond',
        label: '条件判断',
        icon: '',
      },
      {
        type: 'circle',
        text: '结束',
        label: '结束节点',
        icon: '',
      },
    ])
    lf.value.setTheme({
      rect: {
        // 矩形样式
        width: 100,
        height: 50,
        radius: 6,
        fill: '#fff',
        strokeWidth: 2,
      },
    })
    lf.value.render(data)
  })
  function generatorImage() {
    lf.value?.getSnapshot()
  }
  watch(
    () => options.value,
    (newVal) => {
      nextTick(() => {
        lf.value?.updateEditConfig(newVal)
      })
    }
  )
</script>
